<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadData">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--
            列表
                selection-change：当用户勾选或者取消勾选前面的多选框的时候，触发事件
                    事件函数有一个参数：参数是 当勾选或者取消勾选后，剩下的所有被勾选的行，放在数组中
        -->
        <el-table :data="products" highlight-current-row v-loading="listLoading" stripe border size="mini"
                  @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="name" label="商品名称" width="120" sortable></el-table-column>
            <el-table-column prop="costprice" label="成本价" width="120" sortable></el-table-column>
            <el-table-column prop="saleprice" label="零售价" width="120" sortable></el-table-column>
            <el-table-column prop="salecount" label="销量" width="100" sortable></el-table-column>
            <el-table-column prop="offsaletime" label="下架时间" width="120" sortable></el-table-column>
            <el-table-column prop="onsaletime" label="上架时间" width="120" sortable></el-table-column>
            <el-table-column prop="state" label="状态" width="100" sortable>
                <template scope="scope">
                    <span v-if="scope.row.state == 0" style="color: #056c31;">已上架</span>
                    <span v-else style="color: #ff2424;">已下架</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleUp(scope.row.id)">上架</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="primary" @click="batchUp" :disabled="this.sels.length===0">批量上架</el-button>
            <el-button type="primary" @click="batchDown" :disabled="this.sels.length===0">批量下架</el-button>
            <!--
                el-pagination: 分页组件
                    必须通过total属性与当前组件的属性进行绑定，查询到数据后，不但要给table绑定变量赋值，也要给这个total赋值
                    page-size: 表示每页的行数，默认是10
                    current-change： 当当前页码发生改变时触发事件（翻页）
                        在这个事件内，修改请求参数，发送到后端接口
            -->
            <el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--编辑界面-->
        <el-dialog title="编辑" :visible.sync="productFormVisible" :close-on-click-modal="false">
            <el-form :model="productForm" label-width="80px"
                     :rules="productFormRules" ref="productForm">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="productForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="成本价" prop="costprice">
                    <el-input v-model="productForm.costprice" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="零售价" prop="saleprice">
                    <el-input v-model="productForm.saleprice" auto-complete="off"></el-input>
                </el-form-item>


                <el-form-item label="图片资源" prop="resources">
                    <el-upload
                            class="upload-demo"
                            action="http://localhost:8080/fastdfs/upload"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-success="handleSuccess"
                            :file-list="fileList"
                            list-type="picture">
                        <el-button size="small" type="primary" style="width: 100px;height: 29px;">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商品简介" prop="intro">
                    <quill-editor v-model="productForm.detail.intro" :options="quillConfig"></quill-editor>
                </el-form-item>
                <el-form-item label="购买须知" prop="orderNotice">
                    <quill-editor v-model="productForm.detail.orderNotice" :options="quillConfig"></quill-editor>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="productFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="submitForm" :loading="submitLoading">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import {quillEditor} from 'vue-quill-editor';
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    //导入自定义配置
    import quillConfig from '../../common/js/quill-config';
    export default {
        //自定义局部组件
        components:{
            quillEditor
        },
        data() {
            return {
                quillConfig:quillConfig,	//定义Vue属性
                filters: {				//高级查询的条件
                    name: ''
                },
                products: [],		//表格数据
                total: 0,				//总行数
                page: 1,				//当前页码
                listLoading: false,		//表格是否正在加载数据
                sels: [],				//列表选中行
                productFormVisible: false, //编辑界面是否显示
                submitLoading: false,
                fileList:[],		//文件数组
                productFormRules: {		//表单验证的规则对象
                    /**
                     * name 自定义的验证规则组名称
                     *  对应的是一个json数组，表示支持多重验证
                     *  	required 表示必填 message表示不满足要求时的提示信息
                     *  	trigger表示触发器，表示什么时机触发验证
                     *  		blur 表示失去焦点时进行验证
                     */
                    name: [
                        { required: true, message: '请输入商品名称', trigger: 'blur' }
                    ],
                    costprice: [
                        { required: true, message: '请输入成本价', trigger: 'blur' }
                    ],
                    saleprice: [
                        { required: true, message: '请输入零售价', trigger: 'blur' }
                    ]
                },
                //编辑界面数据[与上面的表单输入框进行了双向绑定：用户在输入框中输入了内容，那么这里的对象的属性值也会随之改变]
                productForm: {
                    id: null,
                    name: '',
                    costprice: '',
                    saleprice: '',
                    state: -1,
                    resources: '',
                    detail:{
                        id:null,
                        intro:'',
                        orderNotice:'',
                        product_id:null
                    }
                },
                productImgs:[]  //商品的图片路径数组
            }
        },
        methods: {
            handleCurrentChange(val) {
                this.page = val;
                this.loadData();
            },
            //页面挂载完毕后加载数据
            loadData() {
                let param = {
                    pageNo: this.page,
                    name: this.filters.name
                };
                this.listLoading = true;

                //NProgress.done();
                this.$http.patch("/product", param).then(res => {
                    //NProgress.start();
                    this.total = res.data.data.total;
                    this.products = res.data.data.rows;
                    this.listLoading = false;
                })
            },
            //删除
            handleDel: function (id) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //发送请求
                    this.$http.delete("/product/" + id).then(res => {
                        console.debug(res)
                        this.listLoading = false;
                        let {success,msg} = res.data  //解构表达式
                        if(success){
                            //提示
                            this.$message.success(msg)
                            //重新加载数据
                            this.loadData()
                        }else{
                            //提示
                            this.$message.error(msg)
                        }
                    })

                })
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.productFormVisible = true;		//弹出模态框
                this.fileList = []
                this.productForm = Object.assign({}, row)
                //根据逗号拆分商品的resources字符串，得到一个数组
                this.productImgs = this.productForm.resources.split(",")
                this.productImgs.map(url => {
                    let name = url.substring(url.lastIndexOf("/") + 1)
                    url = this.fastdfsUrl + url
                    this.fileList.push({name:name,url:url})
                })
                //重置表单的验证效果
                this.$refs.productForm.clearValidate();

            },
            //显示新增界面
            handleAdd: function () {
                this.productFormVisible = true;
                this.fileList = []
                this.productImgs = []
                this.productForm = {
                    id: null,
                    name: '',
                    costprice: '',
                    saleprice: '',
                    state: -1,
                    resources: '',
                    detail:{
                        id:null,
                        intro:'',
                        orderNotice:'',
                        product_id:null
                    }
                };
            },
            //新增或者编辑时提交表单
            submitForm: function () {
                this.$refs.productForm.validate((valid) => {
                    if (valid) {
                        console.debug(this.productForm)
                        this.submitLoading = true;
                        //发送请求
                        this.$http.put("/product", this.productForm).then(res => {
                            let {success,msg} = res.data  //解构表达式
                            if(success){
                                this.$message.success(msg)
                                this.submitLoading = false;
                                this.$refs['productForm'].resetFields();//重置表单
                                this.productFormVisible = false;			//关闭模态框
                                this.loadData()		//重新加载数据
                            }else{
                                this.$message.error(msg)
                            }
                        })
                    }
                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量上架
            batchUp: function () {
                // var ids = [];
                // for(let i=0;i<this.sels.length;i++){
                //     ids.push(this.sels[i].id);
                // }
                // map表示遍历一个数组，里面是一个箭头函数：函数内部表示获取对象的id属性进行返回出来，放入一个数组中
                var ids = this.sels.map(dept => dept.id);
                this.$confirm('确认要上架这些商品吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    /**
                     * 发送请求
                     * 	传递多个id有两个方式：
                     * 		可以将数组使用join方法拼接逗号，形成一个字符串来进行传递，后端可以采用路径变量接收；
                     * 		可以将数组直接传递，后端使用List<Long>来接收，但是这种只能是POST请求才行；
                     */
                    // console.debug(ids)
                    this.$http.post("/product/batch",ids).then(res =>{
                        this.listLoading = false;
                        let {success,msg} = res.data//结构表达式
                        if(success){
                            //提示
                            this.$message.success(msg)
                            //重新加载数据
                            this.loadData()
                        }else {
                            // 提示
                            this.$message.error(msg)
                        }
                    })
                })
            },
            //批量下架
            batchDown: function () {
                // var ids = [];
                // for(let i=0;i<this.sels.length;i++){
                //     ids.push(this.sels[i].id);
                // }
                // map表示遍历一个数组，里面是一个箭头函数：函数内部表示获取对象的id属性进行返回出来，放入一个数组中
                var ids = this.sels.map(dept => dept.id);
                this.$confirm('确认要下架这些商品吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    /**
                     * 发送请求
                     * 	传递多个id有两个方式：
                     * 		可以将数组使用join方法拼接逗号，形成一个字符串来进行传递，后端可以采用路径变量接收；
                     * 		可以将数组直接传递，后端使用List<Long>来接收，但是这种只能是POST请求才行；
                     */
                    // console.debug(ids)
                    this.$http.post("/product/batchDown",ids).then(res =>{
                        this.listLoading = false;
                        let {success,msg} = res.data//结构表达式
                        if(success){
                            //提示
                            this.$message.success(msg)
                            //重新加载数据
                            this.loadData()
                        }else {
                            // 提示
                            this.$message.error(msg)
                        }
                    })
                })
            },
            //文件上传成功后，获取后端返回的fileid，赋值给表单对象的resources属性
            handleSuccess(response, file, fileList){
                console.log("===========")
                console.log(response);
                console.log(file);
                console.log(fileList);
                //每次上传成功后，将本次上传的图片路径添加到数组中
                this.productImgs.push(response.data)
                //join方法的作用是：将数组里面的字符串全部取出来，每个之间使用逗号拼接成一个长字符串
                this.productForm.resources = this.productImgs.join(",");
            },
            handleRemove(file, fileList) {
                var filePath =file.response.resultObj;
                this.$http.delete("/common/fastDfs/?path="+filePath)
                    .then(res=>{
                        if(res.data.success){
                            this.$message({
                                message: '删除成功!',
                                type: 'success'
                            });
                        }else{
                            this.$message({
                                message: '删除失败!',
                                type: 'error'
                            });
                        }
                    })
            },
            handlePreview(file) {
                console.log(file);
            },
            //上架单个商品
            handleUp: function (id) {
                this.$confirm('确认上架该商品吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //发送请求
                    this.$http.post("/product/" + id).then(res => {
                        console.debug(res)
                        this.listLoading = false;
                        let {success,msg} = res.data  //解构表达式
                        if(success){
                            //提示
                            this.$message.success(msg)
                            //重新加载数据
                            this.loadData()
                        }else{
                            //提示
                            this.$message.error(msg)
                        }
                    })

                })
            },
        },
        mounted() {
            this.loadData();
        }
    }

</script>

<style>
    .el-dialog{width: 850px!important;}
    .ql-editor{height: 100px!important;}
</style>